<template>
	<view class="assists">
		<image src="http://image.zjyph.cn/file/pic/20220920165842312704.png" mode="widthFix" style="width: 100%;"></image>
		<view class="assist">
			<!-- <view class="assist-q">
				<view class="assist-w"><text class="iconfont icon-xiazai5"></text></view>
				<view class="assist-e"><input type="text" placeholder="请输入商品" /></view>
			</view> -->
			<!-- <view class="assist-r"><image src="../../static/img/fu.png" mode=""></image></view> -->
			<!-- <view class="assist-t">重点帮扶县（区）</view> -->
			<!-- <view class="assist-y">
				<scroll-view class="assist-u" scroll-x>
					<view class="assist-i" @click="goArea">
						<view class="assist-o"><image src="../../static/img/xian.png" mode=""></image></view>
						<view class="assist-p">沭阳县</view>
					</view>
					<view class="assist-i">
						<view class="assist-o"><image src="../../static/img/xian.png" mode=""></image></view>
						<view class="assist-p">沭阳县</view>
					</view>
					<view class="assist-i">
						<view class="assist-o"><image src="../../static/img/xian.png" mode=""></image></view>
						<view class="assist-p">沭阳县</view>
					</view>
					<view class="assist-i">
						<view class="assist-o"><image src="../../static/img/xian.png" mode=""></image></view>
						<view class="assist-p">沭阳县</view>
					</view>
				</scroll-view>
			</view> -->
			<!-- <view class="assist-a">
				<view class="assist-s">
					<view class="assist-d" v-for="(item, index) in cityList" :key="index" @click="seleTap(index)">
						<view class="assist-f">{{ item.city }}</view>
						<view :class="currenNav == index ? 'navStyle' : 'assist-g'">{{ item.cityName }}</view>
					</view>
				</view>
			</view> -->
			<!-- <view style="height: 1052rpx;">
				
			</view> -->
			<view style="position: absolute;top: 751rpx;width: 100%;">
				<view class="assist-v">立即抢购 一键助农</view>
				<view class="assist-h">
					<view class="assist-j" v-for="(item, index) in goodsList" :key="index"  @click="shopDetails(item)">
						<view class="assist-k"><image :src="item.image" mode=""></image></view>
						<view class="assist-l">{{ item.storeName }}</view>
						<view class="assist-z">
							<view class="assist-x">{{ item.price }}豆</view>
							<view class="assist-c">已售{{ item.sales }}件</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view style="height: 45rpx;"></view>
	</view>
</template>

<script>
import { getActivData } from '@/api/activity';
export default {
	data() {
		return {
			cityList: [
				{ city: '丹阳', cityName: '运河明珠' },
				{ city: '丹阳', cityName: '运河明珠' },
				{ city: '丹阳', cityName: '运河明珠' },
				{ city: '丹阳', cityName: '运河明珠' },
				{ city: '丹阳', cityName: '运河明珠' }
			],
			currenNav: 0,
			goodsList: []
		};
	},
	mounted() {
		this.gettesefun();
	},
	methods: {
		gettesefun() {
			getActivData().then(res => {
				if (res.status == 200) {
					this.goodsList = res.data[0].cateProductList;
				}
			});
		},

		seleTap(index) {
			this.currenNav = index;
		},
		goArea() {
			this.$yrouter.push({ path: '/pages/areaShop/areaShop', query: { id: '' } });
		},
		shopDetails(items) {
			console.log(items.id)
			this.$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: items.id } });
		}
	}
};
</script>
<style>
	page {
		height: auto !important;
		background: #b14a00 !important;
	}
</style>
<style lang="less" scoped>

.assists {
	.assist {
		margin: auto;
		.assist-q {
			width: 100%;
			height: 60rpx;
			background: #eeeeee;
			border-radius: 30rpx;
			margin-top: 24rpx;
			display: flex;
			.assist-w {
				width: 34rpx;
				height: 33rpx;
				margin-left: 29rpx;
				margin-top: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.assist-e {
				width: 85%;
				margin-left: 20rpx;
				input {
					height: 60rpx;
					font-size: 28rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #999999;
					line-height: 60rpx;
				}
			}
		}
		.assist-r {
			height: 250rpx;
			margin-top: 24rpx;
			image {
				width: 100%;
				height: 100%;
				border-radius: 16rpx;
			}
		}
		.assist-t {
			font-size: 36rpx;
			font-family: Source Han Sans CN;
			font-weight: 800;
			font-style: italic;
			color: #f9690a;
			line-height: 72rpx;
			margin-top: 50rpx;
		}
		.assist-y {
			height: 304rpx;
			background: #efddc9;
			border-radius: 16rpx;
			margin-top: 24rpx;
			width: 100%;
			overflow: hidden;
			white-space: nowrap;
			.assist-u {
				height: 100%;
				display: flex;
				width: auto;
				overflow: hidden;
				margin-left: 32rpx;
				.assist-i {
					width: 200rpx;
					height: 304rpx;
					margin-right: 16rpx;
					overflow-y: hidden;
					display: inline-block;
					image {
						width: 100%;
						height: 100%;
					}
					.assist-o {
						width: 200rpx;
						height: 220rpx;
						margin-top: 18rpx;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.assist-p {
						height: 45rpx;
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 500;
						color: #333333;
						line-height: 45rpx;
						text-align: center;
						background: #fff;
						border-radius: 0 0 16rpx 16rpx;
					}
				}
			}
		}
		.assist-a {
			margin-top: 51rpx;
			.assist-s {
				display: flex;
				justify-content: space-between;
				.assist-d {
					width: 130rpx;
					.assist-f {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 600;
						color: #333333;
						line-height: 32rpx;
						text-align: center;
					}
					.assist-g {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 27rpx;
						text-align: center;
						height: 27rpx;
						margin-top: 8rpx;
					}
					.navStyle {
						font-size: 26rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #fff;
						line-height: 30rpx;
						text-align: center;
						height: 30rpx;
						margin-top: 8rpx;
						background: #f37920;
						border-radius: 4rpx;
					}
				}
			}
		}
		.assist-v {
			width: 313rpx;
			height: 48rpx;
			background: #ffffff;
			border-radius: 24rpx;
			margin: auto;
			font-size: 24rpx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #95c881;
			line-height: 48rpx;
			text-align: center;
			margin-bottom: 24rpx;
		}
		.assist-h {
			display: flex;
			justify-content: space-between;
			flex-wrap: wrap;
			width: 95%;
			margin: auto;
			.assist-j {
				height: 448rpx;
				width: 348rpx;
				background: #fff;
				margin-bottom: 20rpx;
				.assist-k {
					height: 304rpx;
					margin-bottom: 24rpx;
					image {
						width: 100%;
						height: 100%;
					}
				}
				.assist-l {
					width: 312rpx;
					font-size: 24rpx;
					font-family: Source Han Sans CN;
					font-weight: 400;
					color: #333333;
					line-height: 36rpx;
					margin-left: 15rpx;
					margin-right: 17rpx;
					overflow: hidden; //超出的文本隐藏
					text-overflow: ellipsis; //溢出用省略号显示
					display: -webkit-box;
					-webkit-line-clamp: 2; // 超出多少行
					-webkit-box-orient: vertical;
				}
				.assist-z {
					display: flex;
					justify-content: space-between;
					margin-top: 10rpx;
					.assist-x {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #ff1a1a;
						line-height: 36rpx;
						margin-left: 15rpx;
					}
					.assist-c {
						font-size: 20rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
						line-height: 36rpx;
						margin-right: 17rpx;
					}
				}
			}
		}
	}
}
</style>
